<template>
  <div class="userIndex">
    <el-dialog title="新增用户" :visible.sync="isOpen" width="30%">
      <UserAdd v-model="isOpen" @flush-data="searchUser"></UserAdd>
    </el-dialog>

    <el-dialog title="修改用户" :visible.sync="isOpenChange" width="30%">
      <UserAdd
        @flush-data="searchUser"
        v-model="isOpenChange"
        :isChange="true"
        :fMember.sync="tempMember"
      ></UserAdd>
    </el-dialog>

    <el-dialog title="组配置" :visible.sync="isOpenGroup" width="30%">
      <UserGroup :fMemberId.sync="tempMemberId"></UserGroup>
    </el-dialog>

    <el-row>
      <el-col :span="3">
        <el-button type="primary" @click="isOpen = true">添加成员</el-button>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="3">
        <el-input placeholder="搜索ID" v-model="search.id">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col :span="3" :offset="1">
        <el-input placeholder="搜索名字" v-model="search.name">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col>
        <el-table :data="list" stripe :border="true">
          <el-table-column fixed prop="id" label="成员ID" align="center" width="100"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="isUse" label="是否启用" align="center">
            <template slot-scope="scope">
              <el-tag
                size="medium"
                :type="scope.row.isUse?`success`:`danger`"
              >{{scope.row.isUse?`启用`:`禁用`}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button
                type="danger"
                @click="deleteUser(scope.row.id)"
                icon="el-icon-delete"
                size="mini"
                circle
              ></el-button>
              <el-button
                type="primary"
                @click="isOpenChange = true;tempMember = scope.row"
                icon="el-icon-edit"
                size="mini"
                circle
              ></el-button>
              <el-button
                type="primary"
                @click="isOpenGroup = true;tempMemberId = scope.row.id"
                size="mini"
              >组配置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="search.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import UserAdd from "./add";
import UserGroup from "./group";
export default {
  name: "UserIndex",
  components: { UserAdd, UserGroup },
  data() {
    return {
      isOpen: false,
      isOpenGroup: false,
      isOpenChange: false,
      list: [],
      tempMember: {},
      tempMemberId: null,
      search: {
        id: "",
        name: "",
        page: 1,
        size: 10
      },
      total: 0
    };
  },
  created() {
    this.searchUser();
  },
  computed: {
    idChange() {
      return this.search.id;
    },
    nameChange() {
      return this.search.name;
    }
  },
  watch: {
    idChange(val) {
      this.searchUser();
    },
    nameChange(val) {
      this.searchUser();
    }
  },
  methods: {
    handleSizeChange(val) {
      this.search.size = val;
      this.searchUser();
    },
    handleCurrentChange(val) {
      this.search.page = val;
      this.searchUser();
    },
    searchUser() {
      //调用服务
      this.$axios
        .get("member/findAll", {
          params: this.search
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.list = data.data;
            this.total = data.count;
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          this.$message.error("网路请求异常");
        });
    },
    deleteUser(id) {
      //调用服务
      this.$axios
        .get("member/delete", {
          params: { id: id }
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.searchUser();
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          this.$message.error("网路请求异常");
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}
</style>
